<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../ohter/js库/mock.js"></script>
    <script src="../../ohter/js库/vue.js"></script>
    <title>h5新增语义化标签</title>
    <style>
        /* 
            以前基本都是div+css 现在增加了语义化标签和新的表单和新的表单属性
                本质还是div 只不过加了语义 还是块元素
                div对搜索引擎来说是没有语义的
                新增语义化标签
                    header 头部标签
                    nav 导航标签
                    article 内容标签
                    section 定义文档某个区域 大号的div
                    aside 侧边栏标签
                    footer 尾部标签
        */
        header {
            height: 150px;
            background-color: pink;
            line-height: 150px;
            text-align: center;
            border-radius: 75px;
        }

        nav {
            margin-top: 10px;
            height: 70px;
            text-align: center;
            line-height: 70px;
            background-color: orange;
            border-radius: 35px;
        }

        article {
            width: 60%;
            height: 500px;
            background-color: purple;
            float: left;
            border-radius: 100px;
        }
        aside {
            width: 40%;
            height: 500px;
            background-color: green;
            float: right;
            border-radius: 100px;
        }

    </style>
</head>

<body>
    <div id="root">
        <header>header头部标签</header>
        <nav>nav导航栏标签</nav>
        <article>
            <section></section>
        </article>
        <aside>
            <ul style="list-style: none;">
                <li v-for="li in list"><a href="#">{{li}}</a></li>
                
            </ul>
        </aside>
      
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data() {
            return {
                list: [
                    Mock.mock('@cword(10)'),
                    Mock.mock('@cword(10)'),
                    Mock.mock('@cword(10)'),
                    Mock.mock('@cword(10)'),
                    Mock.mock('@cword(10)'),
                    Mock.mock('@cword(10)'),
                    Mock.mock('@cword(10)'),
                ]
            }
        },
    })
</script>

</html>